<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-menu class="el-menu-demo" mode="horizontal" default-active="1"
             active-text-color="#ffd04b"  text-color="#fff" background-color="#545c64">
        <el-menu-item index="1" style="font-size: 50px;margin:10px">日志</el-menu-item>
        <el-menu-item index="2" style="font-size: 50px;margin:10px" @Click="open">验证管理</el-menu-item>
    </el-menu>
    <div style="margin: 20px"></div>
    <el-form :inline="true">
        <el-form-item label="姓名" label-width="100px">
            <el-input v-model="page.entity.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-date-picker
                v-model="page.leftCreateTime"
                type="date"
                placeholder="选择日期时间"
                align="right">
        </el-date-picker>
        <el-date-picker
                v-model="page.rightCreateTime"
                type="date"
                placeholder="选择日期时间"
                align="right">
        </el-date-picker>
        <el-select v-model="page.entity.status" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item"
                    :label="item"
                    :value="item">
            </el-option>
        </el-select>

        <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="result.content"
            border
            style="width: 100%">
        <el-table-column
                label="序号"
                type="index"
                width="50">
        </el-table-column>
        <el-table-column
                label="用户名"
                prop="username">
        </el-table-column>
        <el-table-column
                label="电话号码"
                prop="phone">
        </el-table-column>
        <el-table-column
                label="身份证号码"
                prop="idcard">
        </el-table-column>
        <el-table-column
                label="用户类型"
                prop="type">
        </el-table-column>
        <el-table-column
                label="性别"
                prop="sex">
        </el-table-column>
        <el-table-column
                label="状态"
                prop="status">
        </el-table-column>
        <el-table-column
                label="科室"
                prop="department">
        </el-table-column>
        <el-table-column
                label="床号"
                prop="bedno">
        </el-table-column>
        <el-table-column
                label="开始时间"
                prop="startTime">
        </el-table-column>
        <el-table-column
                label="结束时间"
                prop="endTime">
        </el-table-column>
        <el-table-column
                label="拜访时间"
                prop="total">
        </el-table-column>
        <el-table-column
                label="操作"
                width="80" fixed="right">
            <template slot-scope="scope">
                <!--                <el-button-->
                <!--                        v-show="scope.row.endTime == null"-->
                <!--                        size="mini"-->
                <!--                        type="warning"-->
                <!--                            @click="submit(scope.$index, scope.row)">结束</el-button>-->
                <el-button
                        size="mini"
                        type="warning"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <div class="block">
        <el-pagination
                @current-change="search"
                :current-page.sync="page.pageNumber"
                :page-size="page.pageSize"
                layout="total, prev, pager, next"
                :total="result.totalElements">
        </el-pagination>
    </div>


    <el-dialog :visible.sync="showForm" width="80%">
        <el-table
                :data="entitys"
                border
                style="width: 100%">
            <el-table-column
                    label="用户名"
                    prop="username">
            </el-table-column>
            <el-table-column
                    label="电话号码"
                    prop="phone">
            </el-table-column>
            <el-table-column
                    label="身份证号码"
                    prop="idcard">
            </el-table-column>
            <el-table-column
                    label="用户类型"
                    prop="type">
            </el-table-column>
            <el-table-column
                    label="性别"
                    prop="sex">
            </el-table-column>
            <el-table-column
                    label="科室"
                    prop="department">
            </el-table-column>
            <el-table-column
                    label="床号"
                    prop="bedno">
            </el-table-column>
            <el-table-column
                    label="开始时间"
                    prop="startTime">
            </el-table-column>
            <el-table-column
                    label="拜访时间"
                    prop="total">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="80" fixed="right">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            @click="finishTask(scope.$index, scope.row)">结束</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

</div>
</body>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<script src="https://unpkg.com/axios@0.25.0/dist/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        created(){
            this.page.department = this.getUrlKey("id")
            if(this.getUrlKey("id") == 'undefined'){
                this.page.department = "";
            }
            this.search();
            this.findOutTime();
        },
        mounted(){
            this.timer = setInterval(this.findOutTime, 1000 * 60);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
        data() {
            return {
                result: [],
                entitys:[],
                options:['执行中','已结束'],
                page:{
                    pageNumber:1,
                    pageSize:10,
                    entity:{}
                },
                FormData:{},
                showForm:false,
                timer:'',
                audio:{},
            }
        },
        methods: {
            handleEdit(index, row) {
                this.FormData = row;
                this.showForm = true;
            },
            cancel(){
                this.showForm = false;
            },
            save(){
                let there = this;
                axios({
                    method: 'post',
                    url: '/api/user/save',
                    data:there.FormData
                }).then(function (res) {
                    there.fleshList();
                    this.showForm = false;
                }).catch(function (err) {
                    console.log(err);
                });
            },
            search(){
                let there = this;
                axios({
                    method: 'post',
                    url: 'api/task/list',
                    data:this.page,
                }).then(function (res) {
                    let list = res.data.data.data.content;
                    for(let d of list){
                        let sTime = new Date(d.startTime);
                        let eTime = d.endTime == null ? new Date() : new Date(d.endTime);
                        let total = parseInt((eTime - sTime) / 1000 / 60)
                        d.overtime = ('探视' ==  d.type && total > 30);
                        d.total = total + '分钟'
                    }
                    there.result = res.data.data.data;
                }).catch(function (err) {
                    console.log(err);
                });
            },
            findOutTime(){
                let there = this;
                axios({
                    method: 'get',
                    url: 'api/task/findOutTime?department='+this.page.department
                }).then(function (res) {
                    let list = res.data.data.data;
                    there.showForm = list.length > 0;
                    for(let d of list){
                        let sTime = new Date(d.startTime);
                        let eTime = d.endTime == null ? new Date() : new Date(d.endTime);
                        let total = parseInt((eTime - sTime) / 1000 / 60)
                        d.total = total + '分钟'
                    }
                    if(there.showForm){
                        there.palyAudio();
                    }
                    there.entitys = list;
                }).catch(function (err) {
                    console.log(err);
                });
            },
            finishTask(index,row) {
                let there = this;
                axios({
                    method: 'get',
                    url: 'api/task/finishTask?id='+row.id
                }).then(function (res) {
                    there.findOutTime();
                }).catch(function (err) {
                    console.log(err);
                });
            },
            handleDelete(index,row) {
                let there = this;
                axios({
                    method: 'get',
                    url: 'api/task/delete?id='+row.id
                }).then(function (res) {
                    there.search();
                }).catch(function (err) {
                    console.log(err);
                });
            },
            palyAudio(){
                let myAudio = new Audio();
                myAudio.src = 'message.mp3'
                myAudio.play();
            },
            open(){
                window.location.href='code.html';
            },
            getUrlKey: function (name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null
            }
        },
    })
</script>
<style type="text/css">
    .block{
        margin-top: 20px;
        margin-left: 5%;
    }
</style>
</html>